<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style>
   ul{
  display:inline-block;
  text-align:center;
  padding:0;
  position:relative;
  border:1px solid black;
  list-style:none;
  transition:all 0.5s ease-in;
}
li{
  cursor:pointer;
  background:green;
  display:inline-block;
}
#slider{
width: 32px;
left: 0px;
  height:3px;
  background:#aa1a22;
  position:relative;
  transition:all 0.5s ease-in;
}
</style>
<body>
    <ul>
        <li>点我</li>
        <li>点我吧</li>
        <li>点点我嘛</li>
        <li>求你了，点我</li>
        <li>点我点我点我点我</li>
        <div id="slider"></div>
      </ul>
    
    
    
</body>
<script>
// 底部滑块
var slider = document.querySelector("#slider");
var listItems = document.querySelectorAll("li"); 
var ul = document.querySelector("ul");
var ulWidth = ul.clientWidth;
function listClick(e){
    console.log(e)
  var ele = e.target;
  if(ele.tagName.toLowerCase() === "li"){
    var liWidth = ele.clientWidth;
    // 获取到父元素左侧的偏移
    var offsetLeft = ele.offsetLeft;
    // 设置滑块宽度与点击的列表项宽度一致
    slider.style.width = liWidth+"px";
    // 设置滑块与点击的列表项偏移量一致
    slider.style.left = offsetLeft+"px";
  }
}
// 事件代理
ul.addEventListener("click",listClick,false)
</script>
</html>